@model AffiliateModel

<div class="panel-group">
    <div class="sub-panel panel-search">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-7">
                    <div class="form-group">
                        <div class="col-md-5">
                            <nop-label asp-for="AffiliatedOrderSearchModel.StartDate" />
                        </div>
                        <div class="col-md-5">
                            <nop-editor asp-for="AffiliatedOrderSearchModel.StartDate" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-5">
                            <nop-label asp-for="AffiliatedOrderSearchModel.EndDate" />
                        </div>
                        <div class="col-md-5">
                            <nop-editor asp-for="AffiliatedOrderSearchModel.EndDate" />
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <div class="col-md-4">
                            <nop-label asp-for="AffiliatedOrderSearchModel.OrderStatusId" />
                        </div>
                        <div class="col-md-8">
                            <nop-select asp-for="AffiliatedOrderSearchModel.OrderStatusId" asp-items="Model.AffiliatedOrderSearchModel.AvailableOrderStatuses" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <nop-label asp-for="AffiliatedOrderSearchModel.PaymentStatusId" />
                        </div>
                        <div class="col-md-8">
                            <nop-select asp-for="AffiliatedOrderSearchModel.PaymentStatusId" asp-items="Model.AffiliatedOrderSearchModel.AvailablePaymentStatuses" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <nop-label asp-for="AffiliatedOrderSearchModel.ShippingStatusId" />
                        </div>
                        <div class="col-md-8">
                            <nop-select asp-for="AffiliatedOrderSearchModel.ShippingStatusId" asp-items="Model.AffiliatedOrderSearchModel.AvailableShippingStatuses" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-5">
                    <button type="button" id="search-orders" class="btn btn-primary btn-search">
                        <i class="fa fa-search"></i>
                        @T("Admin.Common.Search")
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-panel">
        <div class="panel-body">
            @await Html.PartialAsync("Table", new DataTablesModel
            {
                Name = "orders-grid",
                UrlRead = new DataUrl("AffiliatedOrderListGrid", "Affiliate", new RouteValueDictionary { [nameof(Model.AffiliatedOrderSearchModel.AffliateId)] = Model.AffiliatedOrderSearchModel.AffliateId }),
                SearchButtonId = "search-orders",
                Length = Model.AffiliatedOrderSearchModel.PageSize,
                LengthMenu = Model.AffiliatedOrderSearchModel.AvailablePageSizes,
                Filters = new List<FilterParameter>
                {
                    new FilterParameter(nameof(Model.AffiliatedOrderSearchModel.StartDate), nameof(AffiliatedOrderSearchModel)),
                    new FilterParameter(nameof(Model.AffiliatedOrderSearchModel.EndDate), nameof(AffiliatedOrderSearchModel)),
                    new FilterParameter(nameof(Model.AffiliatedOrderSearchModel.OrderStatusId), nameof(AffiliatedOrderSearchModel)),
                    new FilterParameter(nameof(Model.AffiliatedOrderSearchModel.PaymentStatusId), nameof(AffiliatedOrderSearchModel)),
                    new FilterParameter(nameof(Model.AffiliatedOrderSearchModel.ShippingStatusId), nameof(AffiliatedOrderSearchModel))
                },
                ColumnCollection = new List<ColumnProperty>
                {
                    new ColumnProperty(nameof(AffiliatedOrderModel.CustomOrderNumber))
                    {
                        Title = T("Admin.Affiliates.Orders.CustomOrderNumber").Text,
                        Width = "200"
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.OrderStatus))
                    {
                        Title = T("Admin.Affiliates.Orders.OrderStatus").Text,
                        Render = new RenderCustom("renderOrderStatus")
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.PaymentStatus))
                    {
                        Title = T("Admin.Affiliates.Orders.PaymentStatus").Text
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.ShippingStatus))
                    {
                        Title = T("Admin.Affiliates.Orders.ShippingStatus").Text
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.OrderTotal))
                    {
                        Title = T("Admin.Affiliates.Orders.OrderTotal").Text
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.CreatedOn))
                    {
                        Title = T("Admin.Affiliates.Orders.CreatedOn").Text,
                        Render = new RenderDate()
                    },
                    new ColumnProperty(nameof(AffiliatedOrderModel.Id))
                    {
                        Title = T("Admin.Common.View").Text,
                        Width = "150",
                        ClassName = NopColumnClassDefaults.Button,
                        Render = new RenderButtonView(new DataUrl("~/Admin/Order/Edit/", nameof(AffiliatedOrderModel.Id)))
                    }
                }
            })

            <script>
                var selectedIds = [];
                var reportAggregates = "";

                function renderOrderStatus(data, type, row, meta) {

                    var color;
                    switch (row.OrderStatusId) {
                        case 10: color = 'yellow'; break;
                        case 20: color = 'blue'; break;
                        case 30: color = 'green'; break;
                        case 40: color = 'red'; break;
                    }

                    return '<span class="grid-report-item ' + color + '">' + data + '</span >';
                }
            </script>
        </div>
    </div>
</div>
